<template>
  <!--合同订单打印-->
  <div class="mod-config">
    <el-row style="padding: 10px;">
      <div style="width: 1020px;margin: auto;">
        <el-button class="filter-item" plain style="margin-left: 10px;" type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
        <el-button type="primary" plain @click="handleWindowPrint( '#demo', '合同订单' )">浏览器方式下载</el-button>
      </div>
    </el-row>
    <div style="width: 100%">
      <div id="demo">
        <h2><center><b>合同订单</b></center></h2>
        <el-table :data="tableData" :span-method="arraySpanMethod" :show-header="false" style="width: 100%" border >
          <el-table-column prop="one" >
            <template slot-scope="scope">
              <div style="text-align: right;color: black;padding: 10px 10px"><span>{{scope.row.one}}</span></div>
            </template>
          </el-table-column>
          <el-table-column prop="oneValue">
            <template slot-scope="scope">
              <div v-if="scope.row.oneType === 1" style="text-align: left;color: black;font-weight: bold;padding: 10px 0"><span>{{scope.row.oneValue}}</span></div>
              <div v-if="scope.row.oneType === 2" style="padding: 20px">
                <el-table :data="detailList"  style="width: 100%" :cell-style="cellstyle"
                          :header-cell-style="rowclass" border>
                  <el-table-column prop="productByProductId.productName"  label="产品名" >
                    <template slot-scope="scope">
                      <div style="padding: 10px 0">{{scope.row.productByProductId.productName}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="productByProductId.productModel" label="型号" >
                  </el-table-column>
                  <el-table-column prop="productDetailCount" label="数量" >
                  </el-table-column>
                  <el-table-column prop="productDetailPrice" label="单价" >
                    <template slot-scope="scope">￥{{scope.row.productDetailPrice}}</template>
                  </el-table-column>
                  <el-table-column prop="productDetailMoney" label="金额" >
                    <template slot-scope="scope">￥{{ (scope.row.productDetailMoney = scope.row.productDetailPrice *scope.row.productDetailCount)}}</template>
                  </el-table-column>
                  <el-table-column prop="productDetailRemarks" label="备注" >
                  </el-table-column>
                </el-table>
                <div style="padding: 10px 0 0 20px">合计（大写金额）：{{contract.contractTotalAmount |ToString}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="two">
            <template slot-scope="scope">
              <div style="text-align: right;color: black;padding: 10px 10px"><span>{{scope.row.two}}</span></div>
            </template>
          </el-table-column>
          <el-table-column prop="twoValue">
            <template slot-scope="scope">
              <div style="text-align: left;color: black;font-weight: bold;padding: 10px 0"><span>{{scope.row.twoValue}}</span></div>
            </template>
          </el-table-column>
          <el-table-column prop="three">
            <template slot-scope="scope">
              <div style="text-align: right;color: black;;padding: 10px 10px"><span>{{scope.row.three}}</span></div>
            </template>
          </el-table-column>
          <el-table-column prop="threeValue">
            <template slot-scope="scope">
              <div style="text-align: left;color: black;font-weight: bold;padding: 10px 0"><span>{{scope.row.threeValue}}</span></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import htmlToPdf from '../assets/htmlToPdf'
  const libraryOption = [{id: 0, name: '家庭原因'}, {id: 1, name: '个人发展'}, {id: 2, name: '薪资福利'},
    {id: 3, name: '工作环境'}, {id: 4, name: '工作时间'}, {id: 5, name: '身体健康'}]
  const calendarTypeKeyValue = libraryOption.reduce((acc, cur) => {
    acc[cur.id] = cur.name
    return acc
  }, {})
  export default {
    name: 'Test',
    data () {
      // 和导出pdf没关系
      return {
        nowtime:'',//日期
        emp:{},
        contract: {
          contractId: 0,//合同id
          contractTheme: '', //主题
          opportunityByOppId:'',//销售机会
          customerByCustomerId: '',//对应客户
          employeeByEmpId:'',//所有者
          contractChance:'',//对应机会
          contractNo:'',  //合同订单号
          contractSort:'',//分类
          contractTotalAmount:0,  //总金额
          contractPaymentMethods:'', //付款方式
          contractStartTime:'',  //下单时间
          contractEndTime:'', //结束时间
          contractCustomerSigner:'',//客户签约人
          contractOurSigner:'', //我方签约人
          contractBackAmount:0,//已回款金额
          contractInvoiceAmount:0,//已开票金额
          contractMoneyMethods:'',  //结款方式
          contractStatus: '', //状态
          contractBodyText:'',  //合同正文及附件
          contractNote:'',//备注
          // contractDelivery: '',
          // contractPayment: '',
          // contractPackage: '',
          // contractRemarks: '',
          contractAppStatus: 0,
          employeeByAppEmpId:null
        },
        detailList: [],//明细集合
        tableData:[{
          one:'客户:',
          oneValue:'',
          oneType:1,
          two:'客户签约人:',
          twoValue:'',
          three:'日期:',
          threeValue:''
        }, {
          one:'我方签约人:',
          oneValue:'',
          oneType:1,
          two:'制表人:',
          twoValue:'',
          three:'',
          threeValue:''
        },{
          one:'订单明细:',
          oneValue:'',
          oneType:2,
          two:'',
          twoValue:'',
          three:'',
          threeValue:''
        },/*{
          one:'交付说明:',
          oneValue:'',
          oneType:1,
          two:'',
          twoValue:'',
          three:'',
          threeValue:''
        },{
          one:'付款说明:',
          oneValue:'',
          oneType:1,
          two:'',
          twoValue:'',
          three:'',
          threeValue:''
        },{
          one:'包装运输:',
          oneValue:'',
          oneType:1,
          two:'',
          twoValue:'',
          three:'',
          threeValue:''
        },{
          one:'备注:',
          oneValue:'',
          oneType:1,
          two:'',
          twoValue:'',
          three:'',
          threeValue:''
        },*/],
        lxOptions: [{
          value: 1,
          label: '未生效'
        },{
          value: 2,
          label: '执行中'
        }, {
          value: 3,
          label: '结束'
        }, {
          value: 4,
          label: '意外终止'
        }],
      }
    },
    filters: {
      typeFilter (type) {
        return calendarTypeKeyValue[type]
      },
      ToString(n) {
        if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
          return "数据非法";  //判断数据是否大于0
        }
        var unit = "千百拾亿千百拾万千百拾元角分", str = "";
        n += "00";
        var indexpoint = n.indexOf('.');  // 如果是小数，截取小数点前面的位数
        if (indexpoint >= 0){
          n = n.substring(0, indexpoint) + n.substr(indexpoint+1, 2);   // 若为小数，截取需要使用的unit单位
        }
        unit = unit.substr(unit.length - n.length);  // 若为整数，截取需要使用的unit单位
        for (var i=0; i < n.length; i++){
          str += "零壹贰叁肆伍陆柒捌玖".charAt(n.charAt(i)) + unit.charAt(i);  //遍历转化为大写的数字
        }
        return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整"); // 替换掉数字里面的零字符，得到结果
      },
    },
    methods: {
      // 查询当前员工
      loginEmp() {
        this.$axios.get('http://localhost:8088/emp')
          .then(v => {
            this.emp = v.data
            this.compute()
          })
          .catch(function (v) {
          })
      },
      //获取今天日期
      getNowTime() {
        var now = new Date();
        var year = now.getFullYear(); //得到年份
        var month = now.getMonth(); //得到月份
        var date = now.getDate(); //得到日期
        month = month + 1;
        month = month.toString().padStart(2, "0");
        date = date.toString().padStart(2, "0");
        var defaultDate = `${year}-${month}-${date}`;
        this.nowtime=defaultDate;
      },
      // 查询报价
      findContract () {
        let conId = this.$route.query.contractId
        this.$axios.get('http://localhost:8088/emp-con-id', {
          params: {
            conId : conId
          }
        })
          .then(v => {
            this.contract = v.data
            this.loginEmp()

          })
          .catch(function (v) {})
      },
      // 查询详单集合
      findDetailList(){
        let conId = this.$route.query.contractId
        this.$axios.get('http://localhost:8088/con-detail-list', {
          params:{
            conId : conId
          }
        })
          .then(v => {
            this.detailList = v.data
          })
          .catch(function (v) {})
      },
      // 赋值
      compute(){
        for(let i=0;i<this.tableData.length;i++) {
          if (i === 0){
            this.tableData[0].oneValue = this.contract.customerByCustomerId.customerName
            this.tableData[0].threeValue = this.contract.contractEndTime
          }else if(i === 1){
            this.tableData[1].oneValue = this.contract.employeeByEmpId.empName
            this.tableData[1].twoValue = this.emp.empName
          }else if(i === 3){
            this.tableData[3].oneValue = this.contract.contractCustomerSigner
          }/*else if(i === 4){
            this.tableData[4].oneValue = this.contract.contractPayment
          }else if(i === 5){
            this.tableData[5].oneValue = this.contract.contractPackage
          }else if(i === 6){
            this.tableData[6].oneValue = this.contract.contractRemarks
          }*/
        }
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if(rowIndex === 1){
          if (columnIndex === 3) {
            return [1, 3];
          }
        }else if (rowIndex === 2) {
          if (columnIndex === 1) {
            return [1, 5];
          }
        }else if (rowIndex === 3){
          if (columnIndex === 1) {
            return [1, 5];
          }
        }else if (rowIndex === 4){
          if (columnIndex === 1) {
            return [1, 5];
          }
        }else if (rowIndex === 5){
          if (columnIndex === 1) {
            return [1, 5];
          }
        }else if (rowIndex === 6){
          if (columnIndex === 1) {
            return [1, 5];
          }
        }
      },
      handleWindowPrint (ele, fileName) {
        // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
        document.head.innerHTML = '<meta charset="utf-8">\n' +
          ' <title> ' + fileName + '</title>\n' +
          ' <meta name="format-detection" content="telephone=no">\n' +
          ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
          ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
          ' <link rel="stylesheet" href="./static/css/contract.css"/>'
        document.body.innerHTML = document.querySelector(ele).outerHTML
        // 转异步 等待dom元素渲染（样式）完毕在打印
        setTimeout(() => {
          // 打印
          window.print()
          // 刷新页面
          window.location.reload()
        }, 20)
      },
      goBack () {
        this.$router.go(-1)
      },
      rowclass(){
        return "text-align:center"
      },
      cellstyle(){
        return "text-align:center"
      },
    },
    created () {
      this.findContract()
      this.findDetailList()
      this.getNowTime();
    },
  }
</script>

<style scoped>
  #demo {
    background-color: #fff;
    width: 1000px;
    margin: auto;
    padding: 40px;
    box-sizing: border-box;
  }

</style>
